<template>
	<div class='page toc_IM_chat_frame'>
		<div class='toc_IM_header'>
			<span style='display: inline-block;position: absolute; left: 10px;' @click="close">
				<img v-bind:src="imgConfig.back" style='width: 16px;'>
			</span> 
			<span class='chatName'>{{title}}</span>
			<span style='display: inline-block;position: absolute; right: 10px;' @click="openComponent('chatInfo')">
				<img v-bind:src="imgConfig.ellipsis" style='width: 16px;'>
			</span>
		</div>
		<transition name="slide-fade">
			<component v-bind:is="currentComponent.instance" :components-data='currentComponent.componentsData' @emit-components='emitComponents'>
			</component>
		</transition>
		<div class='getMoreMsgList' @click="getChatHistoryMore()" v-if='showCHMhandler'>查看更多消息</div>
		<div class='toc_IM_chat_content' v-bind:class="{'openhandler':morehandlerc.status}" id='toc_IM_chat_content'>
			<mt-popup :modal='false' v-model="popupVisible" position="top" class='mint-popup-2'>正在更新…</mt-popup>
			
			<ul>
				<li class='chatItem' 
					v-for='(item,index) in chatList' 
					v-bind:class="[item.ismine?'mine':'']"
					ref="chatItem">
					<div class='Option'>
						<span @click="ss(item.id)">撤回</span>
						<span @click="ss(item.id)">待办</span>
					</div>
					<div class='chatUser'>
						<img class='avata' v-bind:src='imgConfig.d_user' v-if="item.avata==''">
						<img class='avata' v-bind:src='item.avata' v-if="item.avata!=''">
						<span>{{item.author}}</span>
					</div>
					<div class='chat_time'>
						<div v-html='$options.filters.formatTime(chatList[index-1],item.getTime)'></div>
					</div>
					<div class='chatData' v-bind:class="[item.chatMsgType==SystemConst.ChatMsgType.Image?'hasImage':'']"
						@touchstart="chatItemTouchEvent('touchstart',$event)" 
					 	@touchend="chatItemTouchEvent('touchend',$event)">
						<div class="mint-spinner-snake toc_IM_loading" v-if="item.status==0"></div>
						<div v-html='$options.filters.parseChatStringToReadable(item.chatData)' v-if='item.chatMsgType==SystemConst.ChatMsgType.Text'></div>
						<img v-bind:src="SystemConst.OSSconfig.basePath+item.chatData.fileKey+'?x-image-process=image/resize,m_lfit,h_100,w_100'" 
							v-if='item.chatMsgType==SystemConst.ChatMsgType.Image'
							@click="viewer('查看图片',SystemConst.OSSconfig.basePath+item.chatData.fileKey)">
						<div class ='File' v-if='item.chatMsgType==SystemConst.ChatMsgType.File' @click="viewer('查看文件',SystemConst.OSSconfig.basePath+item.chatData.fileKey)">
							<img v-bind:src="imgConfig.sfile" style='width: 30px; height: 30px; margin: 8px 10px 8px 0;float: left;' v-if='!item.ismine'> 
							<img v-bind:src="imgConfig.minesfile" style='width: 30px; height: 30px; margin: 8px 10px 8px 0;float: left;' v-if='item.ismine'> 
							{{item.chatData.fileName}}
						</div>
						<div class ='TextImage' v-if='item.chatMsgType==SystemConst.ChatMsgType.TextImage' @click="viewer('查看图文消息',item.chatData.URL)">
							<img v-bind:src="item.chatData.mainImage" style='width: 70px;float: left;height:70px'> 
							<span>{{item.chatData.title}} </span>
							<p>{{item.chatData.desc}} </p>
						</div>
					</div>
				</li>

			</ul>
		</div>
		<div class='toc_IM_chat_operation' v-bind:class="{'openhandler':morehandlerc.status}">
			<div class='toc_IM_chat_common'>
				<span class='toc_IM_chat_ico ' @click="morehandler('face')">
					<img v-bind:src='imgConfig.face'>
				</span>
				<div class='toc_IM_contenteditable' contenteditable="true" id='chatText' @input="parseChatText"></div>

				<span class='toc_IM_chat_ico right' @click="morehandler('add')">
					<img v-bind:src='imgConfig.add'>
				</span>
				<span class='toc_IM_chat_ico right' @click="sendMessage()">
					<img v-bind:src='imgConfig.send'>
				</span>
			</div>
			<div class='toc_IM_chat_more' v-if='morehandlerc.fujian'>
				<span class='toc_IM_chat_more_ico' @click="addAttachment('image')">
					<img v-bind:src='imgConfig.pic'>
					<font>图片</font>
				</span>
				<span class='toc_IM_chat_more_ico' @click="addAttachment('all')">
					<img v-bind:src='imgConfig.file'>
					<font>文件</font>
				</span>
				<span class='toc_IM_chat_more_ico' @click="openComponent('imageText')">
					<img v-bind:src='imgConfig.imageText'>
					<font>图文消息</font>
				</span>
			</div>
			<div class='toc_IM_face_container' v-if='morehandlerc.face'>
				<img class='face_item' v-bind:src='item' v-for='(item,index) in imgConfig.faceList' @click='enjectFaceToEditArea(index)'>
			</div>
		</div>

	</div>
</template>

<script>
	import systemConst from '@/assets/scripts/systemConst.js'
	import imgConfig from '@/assets/scripts/imgConfig.js'
	import units from '@/assets/scripts/units.js'
	import print from '@/components/canvas.vue'
	import chatInfo from '@/components/chatInfo.vue'
	import viewer from '@/components/viewer.vue'
	import imageText from '@/components/imageText.vue'
	import dataInterface from '@/assets/scripts/dataInterface.js'
	export default {
		name: 'chat',
		components: {
			viewer,
			print,
			chatInfo,
			imageText
		},
		computed: {
			userId() {return this.$store.state.userId},
			currentPageName() {return this.$store.state.routerInfo.currentPageName},
			StoreSendMessage(){return this.$store.state.sendMessage}
		},
		data() {
			return {
				title:null,
				showCHMhandler:false,
				popupVisible: false,
				currentComponent: {
					instance: null,
					componentsData: null,
					emitData: null
				},
				morehandlerc: {
					status: false,
					fujian: false,
					face: false
				},
				currentChatObj: {
					chatTextEl: null,
					readtext: null,
					realtext: ''
				},
				chatInfo: {},
				chatMemInfo:null,
				chatList: [],
				chatMemsMap: null,
				imgConfig: imgConfig,
				SystemConst:systemConst,
				chatListDebounce:null
			}
		},
		beforeDestroy() {
			window.removeEventListener("keydown",this.KeyListener, false);
			this.$bus.off('tocIM_PAGE' + this.currentPageName);
		},
		mounted() {
			this.init();
		},
		filters: {
			parseChatStringToReadable(chatString) {
				return units.parseChatStringToReadable(chatString)
			},
			formatTime(_oldtimestamp, _currenttimestamp) {
				/*var oldtimestamp = 0;
				var currenttimestamp=parseInt(_currenttimestamp);
				if(_oldtimestamp != undefined) {
					oldtimestamp = parseInt(_oldtimestamp.getTime);
				};
				if((currenttimestamp - oldtimestamp) > 300000) {
					return units.formatTime(currenttimestamp) //五分钟
				} else {
					return ''
				};*/
				return units.formatTime(_currenttimestamp)
			}
		},
		methods: {
			init() {
				units.Scroll.scrollController.el='toc_IM_chat_content';
				$("div.toc_IM_chat_content,div.toc_IM_contenteditable").click(()=> {
					if(this.morehandlerc.status) {
						this.morehandlerc.status = false;
						this.morehandlerc.face = false;
						this.morehandlerc.fujian = false;
					};
					$('li.chatItem').find('div.Option').css('visibility','hidden');
				});
				this.chatListDebounce =new units.Debounce({
					callback:chatListLastAction=>{
						this.chatListScrollController(chatListLastAction)
					}
				});
				this.currentChatObj.chatTextEl = document.getElementById('chatText');
				if(!units.browers.isMobile()) {
					window.addEventListener("keydown", this.KeyListener, false);
				};
				this.watchMessage();
				this.getChatInfo();
				units.Scroll.watchScroll(null,scroll=>{
					if(scroll.action=='top'&&scroll.relativeMargin<50){
						this.showCHMhandler=true;
					}else{
						this.showCHMhandler=false;
					}
				});
				
			},
			ss(a){
				alert(a)
			},
			chatItemTouchEvent(type,event){
				var $event = event.target;
				if(type == 'touchstart' && chatItemLoop == null){
					chatItemLoop = setTimeout(()=>{
						$('li.chatItem').find('div.Option').css('visibility','hidden');
						$($event).parents('li.chatItem').find('div.Option').css({
							"visibility":"visible",
							"right":$($event).parents('li.chatItem').find('div.chatData').width()+80,
						});
					},800)
				}else{
					clearInterval(chatItemLoop);
					chatItemLoop=null;
				}
			},
			chatListScrollController(chatListLastAction){
				var isHasUnReadMsg=false;
				//是否存在未读消息
				this.chatListManager('select',{
					targetAttr:'isread',
					targetAttrValue:false,
					callback:getChatItem=>{
						if(getChatItem.length>0){
							isHasUnReadMsg=true;
							var getchatItemConnectedElement = $(this.$refs.chatItem[getChatItem[0].index]);
							getchatItemConnectedElement.addClass('firstUnReadMeg')
							units.Scroll.scrollTo(null,getchatItemConnectedElement);
							getChatItem.forEach(item=>{
								this.chatListManager('update',{
									targetId:item.chatItem.id,
									newData:{isread:true}
								});	
							})
						};	
					}
				});
				//是否存在未读消息
				if(!isHasUnReadMsg){
					if(chatListLastAction=='add'){
						units.Scroll.scrollTo(null,'bottom');
					}else if(chatListLastAction=='prev'){
						units.Scroll.scrollTo(null,$(this.$refs.chatItem[20]),{speed:0});
					};
				};
			},
			getTitle(){
				if(this.chatInfo.chatType==this.SystemConst.ChatType.ChatSingle){
					var otherUserId=null;
					this.chatInfo.mem.forEach(item =>{
						if(item!=this.userId){otherUserId=item};
					});
					this.title='与  '+this.chatInfo.memMap[otherUserId].name+' 聊天中';
				}else if(this.chatInfo.chatType==this.SystemConst.ChatType.ChatGroup){
					this.title=this.chatInfo.title+' 的群聊';
				};
			},
			getChatInfo() {
				this.popupVisible = true;
				dataInterface.chatMsgList({
					memId: this.userId,
					chatId: this.$route.query.chatId
				},(res)=>{
					this.chatInfo = res.chat;
					this.chatMemInfo = res.chatMemInfo;
					this.chatMemsMap = res.chat.memMap;
					this.getChatHistoryInit(res.chatMsgList);
					this.popupVisible = false;
					this.getTitle();
					if(this.chatInfo._id == this.StoreSendMessage.chatId &&this.StoreSendMessage != null){
						this.createImageText()
					};
				});
			},
			getChatHistoryMore(){
				dataInterface.chatMsgListSimple({
					sortId:this.chatList[0].id,
					chatId: this.$route.query.chatId,
				},(res)=>{
					var getChatHistoryList = res;
					getChatHistoryList.forEach(item => {
						var isMine = item.sendMemId == this.userId;
						this.chatListManager('prev',{
							id: item._id,
							getTime: item.serverReceiveTime,
							ismine: isMine,
							isread:this.chatMemInfo.lastReadTime>item.serverReceiveTime?true:false,
							chatMsgType:item.chatMsgType,
							chatData: item.chatData,
							avata: this.getMemInfo(item.sendMemId).avatar,
							author: this.getMemInfo(item.sendMemId).name,
							status: 2 
						});
					});
				});
			},
			getChatHistoryInit(data) {
				var getChatHistoryList = data.reverse();
				getChatHistoryList.forEach(item => {
					var isMine = item.sendMemId == this.userId;
					this.chatListManager('add',{
						id: item._id,
						getTime: item.serverReceiveTime,
						ismine: isMine,
						isread:this.chatMemInfo.lastReadTime>item.serverReceiveTime?true:false,
						chatMsgType:item.chatMsgType,
						chatData: item.chatData,
						avata: this.getMemInfo(item.sendMemId).avatar,
						author: this.getMemInfo(item.sendMemId).name,
						status: 2 
					});
				});
			},
			getMemInfo(memId) {
				return this.chatMemsMap[memId.toString()]
			},
			watchMessage(){
				this.$bus.on('tocIM_PAGE' + this.currentPageName, data => {
					if(data.data.chatID == this.chatInfo._id &&this.$messageController.runId!=data.data.runId) {
						this.chatListManager('add',{
							id: data.data._id,
							getTime: data.data.serverReceiveTime,
							ismine: data.data.sendMemId==this.userId?true:false,
							isread:true,
							chatMsgType:data.data.chatMsgType,
							chatData: data.data.chatData,
							avata: this.getMemInfo(data.data.sendMemId).avatar,
							author: this.getMemInfo(data.data.sendMemId).name,
							status: 2 
						});
						this.$messageController.emit(
							'ChatMsgSocket_ClientReceive', {
							memId: this.userId,
							chatId: data.data.chatID
						});
					};
				});
			},
			sendMessage(chatData,chatMsgType){
				var _chatData, _chatMsgType, _check;
				if(chatData == undefined){
					_chatData =this.currentChatObj.realtext;
					_chatMsgType =null ;
					_check=_chatData.length>0?true:false;
					if(!_check){
						this.$toast('发送消息内容为空');
					}
				}else{
					_chatData = chatData;
					_chatMsgType = chatMsgType;
					_check=true;
					// 临时写法
					if(this.morehandlerc.status) {
						this.morehandlerc.status = false;
						this.morehandlerc.face = false;
						this.morehandlerc.fujian = false;
					};
					// 临时写法
				};
				if(_check){
					this.$messageController.emit(
						'ChatMsgSocket_ClientSend',
						this.createMessageObj(_chatData,_chatMsgType),
						'ChatMsgSocket_ServerReceive',
						(data) => {
							if(data.results == 'success') {
								this.chatListManager('update',{
									targetId:data.data.ftid,
									newData:{
										status:2,
										id:data.data._id
									}
								});	//更新对应聊天状态
								this.$store.commit({
									type: 'upDateMessageList',
									chatID: data.data.chatID,
									newLastMsg: data.data,
									lastReadTime:data.data.serverReceiveTime
								});
								this.$messageController.emit(
									'ChatMsgSocket_ClientReceive', {
										memId: this.userId,
										chatId: data.data.chatID
								});
							};
						});
					if(chatMsgType==undefined){
						this.clearCurrentChatObj();
					};
				};
			},
			parseChatText() {
				var isOnlyText = true;
				var imgRep = new RegExp(/<img.*?src=[\'|\"](.*?)[\'|\"].*?[\/]?>/, 'g');
				var imgDomList = this.currentChatObj.chatTextEl.innerHTML.match(imgRep);
				if(imgDomList != null) {
					this.currentChatObj.chatTextEl.innerHTML.match(imgRep).forEach(item => {
						if(item.indexOf('name') == '-1') {isOnlyText = false};
					});
				};
				if(isOnlyText) {
					this.currentChatObj.readtext = this.currentChatObj.chatTextEl.innerHTML;
					this.currentChatObj.realtext = units.parseChatStringToRealText(this.currentChatObj.readtext);
				} else {
					this.currentChatObj.chatTextEl.innerHTML = this.currentChatObj.readtext;
					this.$toast('文本中无法发送图片消息');
				}
			},
			clearCurrentChatObj() {
				this.currentChatObj.chatTextEl.innerHTML = null;
				this.currentChatObj.realtext = '';
				this.currentChatObj.readtext = null;
			},
			enjectFaceToEditArea(index) {
				this.currentChatObj.realtext = this.currentChatObj.chatTextEl.innerHTML;
				this.currentChatObj.realtext += ' t_ej[' + index + ']';
				this.currentChatObj.readtext = units.parseChatStringToReadable(this.currentChatObj.realtext);
				this.currentChatObj.chatTextEl.innerHTML = this.currentChatObj.readtext;
				this.parseChatText();
			},
			addAttachment(type){
				var _isPreView,_accept;
				if(type == 'image'){
					_isPreView=true;
					_accept='image/*';
				}else if(type == 'all'){
					_isPreView=false;
					_accept='*/*';
				};
				units.File.chooseFile({
					getFileCallBack:data=>{
						var extension = data.info[0].type;
						if(extension=="image/jpg"||extension=="image/jpeg"||extension=="image/gif"||extension=="image/png"){
							this.openComponent('viewer',{
								filesList:[{path:data.info[0].preViewSrc}],
								allowSend:true,
								sendFileObj:data
							});
						}else{
							this.$messagebox.confirm('确定发送'+data.info[0].name+'吗？').then(action => {
								this.$indicator.open({
								  	text: '正在上传文件',
								  	spinnerType: 'fading-circle'
								});
								units.OSSUpFile(data,getFileInfo=>{
									this.$indicator.close();
									this.sendMessage(getFileInfo,this.SystemConst.ChatMsgType.File);
								});
							});
						};
					},
					accept:_accept,
					capture:'',
					multiple:'',
					isPreView:_isPreView,
					createBase64:false
				});
			},
			chatListManager(type,chatItemParam){
				/*  chatItemParam:{
				  		id: null,
						getTime: null,
						ismine: null,
						isread:null,
						chatMsgType:null,
						chatData: null,
						avata:null,
						author:null,
						status: null //0生成，1发送，2完成，3失败 
				}*/
				var _self =this;
				this.chatListDebounce.initdebounce();
				var checkChatItemParam = function(){
					var result = true;
					var keywordList=['id','getTime','ismine','isread','chatMsgType','chatData','avata','author','status'];
					keywordList.forEach(item=>{
						if(!chatItemParam.hasOwnProperty(item)) result = false;
					});
					Object.keys(chatItemParam).forEach(item =>{
						if(chatItemParam[item] == null && chatItemParam[item] == undefined) result = false;
					});
					return result;
				};
				var createChatItem = function(){
					if(checkChatItemParam()){
						return {
							id: chatItemParam.id,
							getTime: chatItemParam.getTime,
							ismine: chatItemParam.ismine,
							isread: chatItemParam.isread,
							chatMsgType:chatItemParam.chatMsgType,
							chatData: chatItemParam.chatData,
							avata:chatItemParam.avata,
							author:chatItemParam.author,
							status: chatItemParam.status
						}
					}else{
						console.error('createChatItem-->checkChatItemParam has problem',JSON.stringify(chatItemParam))
						return null;
					};	
				};
				if(type=='add'){
					var createChatItemResult = createChatItem();
					createChatItemResult!=null?this.chatList.push(createChatItemResult):null;
					this.chatListDebounce.setValue('add');
					this.chatListDebounce.debounceftn();
				}else if(type=='update'){
					for(var a=0; a<this.chatList.length; a++){
						let currentChatItem = this.chatList[a];
						if(currentChatItem.id == chatItemParam.targetId){
							Object.keys(chatItemParam.newData).forEach(upDateKeyName =>{
								currentChatItem[upDateKeyName] = chatItemParam.newData[upDateKeyName]
							});
							break;
						};
					};
					//this.chatListDebounce.setValue('update');
					//this.chatListDebounce.debounceftn();
				}else if(type=='prev'){
					var createChatItemResult = createChatItem();
					createChatItemResult!=null?this.chatList=[createChatItemResult].concat(this.chatList):null;
					this.chatListDebounce.setValue('prev');
					this.chatListDebounce.debounceftn();
				}else if(type == 'select'){
					var tempArray = [];
					for(var a=0; a<this.chatList.length; a++){
						let currentChatItem = this.chatList[a];
						if(currentChatItem[chatItemParam.targetAttr]== chatItemParam.targetAttrValue){
							tempArray.push({
								index:a,
								chatItem:currentChatItem
							})
						};
					};
					if(typeof chatItemParam.callback == 'function'){
						chatItemParam.callback(tempArray)
					}
				};
			},
			createMessageObj(chatData,chatMsgType) {
				var MessageID = 'toc_IM_X' + new Date().getTime();
				this.chatListManager('add',{
					id: MessageID,
					getTime: new Date().getTime(),
					ismine: true,
					isread:true,
					chatMsgType:chatMsgType == undefined || chatMsgType == null?'30001':chatMsgType,
					chatData: chatData,
					author: this.getMemInfo(this.userId).name,
					avata: this.getMemInfo(this.userId).avatar,
					status: 0 
				});
				return {
					ftid: MessageID,
					chatID: this.chatInfo._id,
					chatMsgType: chatMsgType == undefined || chatMsgType == null?'30001':chatMsgType,
					chatData: chatData,
					sendMemId: this.userId,
					sendTime: new Date().getTime(),
					serverReceiveTime: "",
					status: 1
				}
			},
			viewer(headerTitle,path){
				this.openComponent('viewer',{
					headerTitle:headerTitle,
					filesList:[{path:path}],
					allowSend:false,
				});
			},
			createImageText(){
				this.openComponent('imageText',{
					content:this.StoreSendMessage.data
				});
				this.$store.commit({
					type:'sendMessage',
					chatId:null
				});
			},
			openComponent(cname, data) {
				if(cname == 'chatInfo') {
					this.currentComponent.instance = chatInfo;
					this.currentComponent.componentsData = this.chatInfo;
				} else if(cname == 'print') {
					this.currentComponent.instance = print;
					this.currentComponent.componentsData = null;
				} else if(cname == 'viewer') {
					this.currentComponent.instance = viewer;
					this.currentComponent.componentsData = data;
				} else if(cname == 'imageText') {
					this.currentComponent.instance = imageText;
					this.currentComponent.componentsData = data;
				};
				
			},
			emitComponents(data) {
				if(data!=null){data.functionName.call(this)};
				this.currentComponent.instance = null;
				this.currentComponent.componentsData = null;
			},
			morehandler(type) {
				var _type = type;
				this.morehandlerc.status = true;
				if(_type == 'face') {
					this.morehandlerc.face = true;
					this.morehandlerc.fujian = false;
				} else if(_type == 'add') {
					this.morehandlerc.face = false;
					this.morehandlerc.fujian = true;
				};
			},
			KeyListener(event) {
				var e = event;
				if(e.keyCode == 13 && !(e.ctrlKey)) {
					e.preventDefault();
					this.sendMessage();
					return false;
				} else if(e.ctrlKey && e.keyCode == 13) {
					this.currentChatObj.chatTextEl.innerHTML+='<br/> ';
					placeCaretAtEnd(this.currentChatObj.chatTextEl);
					e.preventDefault();
					return false;
				};
			},
			close() {
				this.$root.$router.push({path: 'messageList'});
			}
		}
	}
	var placeCaretAtEnd = function (el) {
	    el.focus();
	    if(typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") {
	        var range = document.createRange();
	        range.selectNodeContents(el);
	        range.collapse(false);
	        var sel = window.getSelection();
	        sel.removeAllRanges();
	        sel.addRange(range);
	    }else if (typeof document.body.createTextRange != "undefined") {
	        var textRange = document.body.createTextRange();
	        textRange.moveToElementText(el);
	        textRange.collapse(false);
	        textRange.select();
	    }
	};
	var chatItemLoop =null;
</script>

<style>
	div.mint-popup-2 {
		width: 100%;
		height: 50px;
		color: #fff;
		font-size: 14px;
		line-height: 50px;
		position: absolute;
		top: 0;
		text-align: center;
		background-color: rgba(0, 0, 0, .3);
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
	}
	div.toc_IM_header span.chatName{
		text-overflow: ellipsis;
    	overflow: hidden;
    	white-space: nowrap;
   	 	max-width: calc(100% - 100px);
    	display: inline-block;
    	position: relative;
	}
	div.toc_IM_loading {
		width: 10px;
		height: 10px;
		position: absolute;
		left: auto;
		right: -30px;
		top: 2px;
		border-width: 3px;
		border-top-color: #0099f0;
		border-left-color: #0099f0;
		border-bottom-color: #0099f0;
	}
	
	div.toc_IM_chat_frame {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		box-sizing: border-box;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation {
		width: 100%;
		height: 200px;
		overflow: hidden;
		box-sizing: border-box;
		position: absolute;
		bottom: 0;
		z-index: 2;
		padding: 5px 10px;
		background-color: #f8f8f8;
		transition: transform ease-in-out 0.4s 0s;
		transform: translateY(150px)
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation:after {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid #C0BFC4;
		color: #C0BFC4;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation div.toc_IM_chat_common {
		width: 100%;
		min-height: 36px;
		box-sizing: border-box;
		margin-bottom: 5px;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation div.toc_IM_chat_more {
		width: 100%;
		height: 100px;
		border-top: 1px solid #C0BFC4;
		box-sizing: border-box;
		padding: 20px 0;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation div.toc_IM_chat_more span.toc_IM_chat_more_ico {
		box-sizing: border-box;
		display: inline-block;
		width: 25%;
		float: left;
		text-align: center;
		margin: 10px 0;
		position: relative;
		height: 67px;
		cursor: pointer;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation div.toc_IM_chat_more span.toc_IM_chat_more_ico img {
		width: 40px;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation div.toc_IM_chat_more span.toc_IM_chat_more_ico font {
		text-align: center;
		width: 100%;
		display: inline-block;
		font-size: 12px;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation span.toc_IM_chat_ico {
		float: left;
		margin: 4px 10px 0 0;
		cursor: pointer;
		-webkit-user-select: none;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation span.toc_IM_chat_ico.right {
		float: right;
		margin: 4px 0 0 10px;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation span.toc_IM_chat_ico img {
		width: 30px;
		height: 30px;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation input[type='text'] {
		width: calc(100% - 142px);
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		height: calc(100% - 100px);
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 5px 10px;
		background: #eee;
		transition: height ease-in-out 0.4s 0s;
		-webkit-user-select: none;
	}
	div.toc_IM_chat_frame div.getMoreMsgList{
		text-align: center;
		font-size: 14px;
		color: #0099f0;
		background: #F8F8F8;
		width: 100%;
		line-height: 30px;
		height: 30px;
		overflow: hidden;
		position: absolute;
    	z-index: 3;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem.firstUnReadMeg:before{
		position: absolute;
	    border-top: 1px #cecece dashed;
	    content: '未读';
	    width: 100%;
	    left: 0;
	    right: 0;
	    top: -7px;
	    font-size: 12px;
	    text-align: right;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem {
		position: relative;
		margin-bottom: 25px;
		padding-left: 60px;
		min-height: 68px;
		width: 100%;
		display: table;
		box-sizing: border-box;
		padding-bottom: 10%;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem.mine {
		text-align: right;
		padding-left: 0;
		padding-right: 60px;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chat_time {
		background: #999;
		color: #fff;
		text-align: center;
		border-radius: 5px;
		font-size: 12px;
		line-height: 20px;
		width: auto;
		transform: translateX(-50%);
		position: absolute;
		left: 50%;
		padding: 0 5px;
		top: 0;
		z-index: 2;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem div.Option{
		background: rgba(0,0,0,0.9);
		height: 30px;
		line-height: 30px;
	    width: 100px;
	    color: #fff;
	    position: absolute;
	    border-radius: 5px;
	    right: 100px;
	    z-index: 4;
	    font-size: 12px;
	    visibility: hidden;
	    text-align: left;
	    box-sizing: border-box;
	    padding: 0 5px;
	    top: 10px;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem div.Option:after{
		content: '';
	    position: absolute;
	    right: -8px;
	    bottom: 3px;
	    width: 0;
	    height: 0;
	    border-style: solid dashed solid dashed;
	    border-color: transparent transparent #000 transparent;
	    overflow: hidden;
	    border-width: 10px;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem div.Option span{
		padding: 5px 10px;
		position: relative;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem div.Option span:after{
		border-right: 1px #ededed solid;
	    position: absolute;
	    content: '';
	    width: 1px;
	    height: 8px;
	    top: 37%;
	    margin-left: 9px;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatData {
		position: relative;
		min-height: 22px;
		line-height: 22px;
		padding: 8px 15px;
		border-radius: 5px;
		background-color: #fff;
		border-radius: 3px;
		color: #333;
		word-break: break-all;
		font-size: 14px;
		top: 30px;
		float: left;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem.mine div.chatData {
		margin-left: 0;
		text-align: left;
		background-color: #0099f0;
		color: #fff;
		float: right;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatData:after {
		content: '';
		position: absolute;
		left: -10px;
		top: 13px;
		width: 0;
		height: 0;
		border-style: solid dashed dashed;
		border-color: #fff transparent transparent;
		overflow: hidden;
		border-width: 10px;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem.mine div.chatData:after {
		left: auto;
		right: -10px;
		border-top-color: #0099f0;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatData.hasImage {
		width: 40%;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatData.hasImage img {
		width: 100%;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatData div.File{
		min-height: 50px;
    	min-width: 150px;
    	line-height: 50px;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatData div.TextImage{
		position: relative;
		width:100% ;
		min-width: 200px;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatData div.TextImage span{
		width: calc(100% - 80px) ;
		float: left;
		margin-left: 10px;
		text-overflow: ellipsis;
    	overflow: hidden;
    	white-space: nowrap;
    	height: 22px;
    	font-size: 16px;
    	font-weight: 600;
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatData div.TextImage p{
		width: calc(100% - 80px) ;
		float: left;
		margin: 0;
		height: 46px;
    	text-overflow: ellipsis;
    	overflow: hidden;
		font-size: 12px;
		margin-left: 10px;
		
	}
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem.mine div.toc_IM_loading {
		left: auto;
		right: calc(100% + 10px);
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem.mine div.chatUser span {
		left: -86px;
		right: auto;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatUser {
		display: inline-block;
		vertical-align: top;
		font-size: 15px;
		position: absolute;
		left: 3px;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content li.chatItem.mine div.chatUser {
		left: auto;
		right: 3px;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatUser img.avata {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content li div.chatUser span {
		position: absolute;
		font-size: 14px;
		width: 80px;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		height: 20px;
		right: -86px;
		left: auto;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation div.toc_IM_face_container {
		width: 100%;
		box-sizing: border-box;
		height: 140px;
		z-index: 2;
		overflow-y: auto;
		overflow-x: hidden;
		border-top: 1px solid #C0BFC4;
	}
	
	div.toc_IM_face_container img.face_item {
		margin: 5px;
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_operation.openhandler {
		transform: translateY(0)
	}
	
	div.toc_IM_chat_frame div.toc_IM_chat_content.openhandler {
		height: calc(100% - 250px)
	}
</style>